<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>分期账单明细</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/pravate/zhang.css" />
	</head>
	<style type="text/css">
		.list_fq {
			background-color: initial;
		}
		
		.list_fq li {
			padding: 15px 0;
			background-color: #fff;
		}
		
		.list_detail {
			border-bottom: 0;
		}
		
		.active {
			display: block !important;
		}
		
		.mui-scroll-wrapper {
			top: 0;
		}
		
		.mui-table-view:before {
			height: 0;
		}
		
		.tj {
			display: block;
			width: 100%;
			overflow: hidden;
			text-align: center;
		}
		
		.tj div {
			float: left;
			width: 50%;
			padding-top: 10px;
			background-color: inherit;
		}
		
		.tj .left {
			border-right: 1px solid #dedede;
			-moz-border-right-colors: #303 #404 #606 #808 #909 #A0A;
		}
		
		.tj div h3 {
			font-size: 14px;
			color: #999;
		}
		
		.tj div h3 span {
			font-size: 23px;
			color: deepskyblue;
		}
		
		.tj div p {
			font-size: 16px;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">分期账单明细</h1>
		</header>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">

			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron list_fq">
					<div class="tj">
						<div class="left">
							<h3 id="price"><span>0.00</span>元</h3>
							<p>累计收款</p>
						</div>
						<div class="right">
							<h3 id="bishu"><span>0</span>笔</h3>
							<p>交易笔数</p>
						</div>
					</div>
				</ul>
				<!--<p class="hasnot" style="text-align: center;font-size: 14px;display: none;">暂无查询记录</p>-->
			</div>
		</div>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/mobile-detect.min.js" ></script>
		<script type="text/javascript" src="../js/config.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			var count = 1;
			sign = false;
			var amount_sign = false;
			var typeSign = "";
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				typeSign = self.sign;
				if(mui.os.plus) {
					mui.plusReady(function() {
						//						setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
						//						}, 1000);

					});
				} else {
					mui.ready(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					});
				}
			})

			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				
				require(weburl + model1, "json", "post", {
					token: localStorage.getItem("token"),
					page: count,
					number: 10,
					type: parseInt(typeSign)
				}, function(response) {
//					console.log(count);
//					console.log(parseInt(typeSign));
//					console.log(JSON.stringify(response.data.length));
					if(amount_sign == false && response && response.count) {
						$("#price span").html(response.count.amount);
						$("#bishu span").html(response.count.bisu);
						amount_sign = true;
					}
//					if(response.data.length == 0) {
//						$(".hasnot").addClass("active");
//					}
					if(response.data.length < 5) {
						sign = true;
					}
					//					setTimeout(function() {
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for(var i = 0; i < response.data.length; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML = '<a class="list_detail" data-id="' + response.data[i].out_trade_no + '" data-auth="' + response.data[i].trade_no + '"><img class="mui-media-object mui-pull-left" src="../images/zhifubao.png"><div class="mui-media-body">' + response.data[i].created_at.date.substring(0, 19) + '<p class="mui-ellipsis" style="color:coral">' + payStatus(response.data[i].pay_status) + '</p><span>' + response.data[i].total_amount + '</span></div></a>';
						table.appendChild(li);
					}
					count++;
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(sign); //参数为true代表没有更多数据了。
					//					}, 1000);
				}, function() {

				})
			}
			//点击跳转到详情
			mui("body").on("tap", ".list_detail", function() {
				mui.openWindow({
					url: "detail.html",
					id: 'detail.html',
					extras: {
						orderNum: $(this).attr("data-id"),
						authNo: $(this).attr("data-auth")
					}
				});
			})

			function payStatus(numb) {
				var sta = "";
				switch(numb) {
					case 1:
						sta = "支付成功";
						break;
					case 2:
						sta = "支付取消";
						break;
					case 3:
						sta = "等待支付";
						break;
					case 4:
						sta = "已退款";
						break;
					case 5:
						sta = "订单关闭";
						break;
				}
				return sta;
			}
		</script>
	</body>

</html>